<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Dropbox',
        remark: '下拉选择表单',
        extends: [form, input],
        deprecate: 'validate-default',
        attrs: [{
            name: 'cancelable',
            type: 'Boolean',
            remark: '是否可取消当前选中的选项',
            option: '',
            default: ''
          },
          {
            name: 'clearable',
            type: 'Boolean',
            remark: '是否可以清空',
            option: '',
          },
          {
            name: 'multiple',
            type: 'Boolean',
            remark: '是否可多选',
            option: '',
            default: ''
          },
          {
            name: 'drop-props',
            type: 'Object',
            remark: '下拉选项对话框的属性。具体参数请参考Dialog组件',
          },
        ],
        slots: [{
          name: 'default',
          remark: '单个选项组件',
          option: 'Option'
        }],
        examples: [{
          remark: '单选',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-dropbox :model-value="dropVal">
                <w-option v-for="item in drops" :value="item.id" :text="item.text"></w-option>
              </w-dropbox>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    dropVal: '1',
                    drops: [
                      {id: '1', text: '音乐'},
                      {id: '2', text: '美术'},
                      {id: '3', text: '体育'},
                    ]
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    dropVal: '1',
						    drops: [
						      {id: '1', text: '音乐'},
						      {id: '2', text: '美术'},
						      {id: '3', text: '体育'},
						    ]
						  }
						}
					}
        }, {
          remark: '多选',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-dropbox :model-value="dropVal" :multiple="true">
                <w-option v-for="item in drops" :value="item.id" :text="item.text"></w-option>
              </w-dropbox>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    dropVal: '1',
                    drops: [
                      {id: '1', text: '音乐'},
                      {id: '2', text: '美术'},
                      {id: '3', text: '体育'},
                    ]
                  }
                }
              }
            </${'script'}>
          `,
					comp: {
						data() {
						  return {
						    dropVal: '1',
						    drops: [
						      {id: '1', text: '音乐'},
						      {id: '2', text: '美术'},
						      {id: '3', text: '体育'},
						    ]
						  }
						}
					}
        },{
          remark: '下拉框设置最小宽度，并设置class样式',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-dropbox :model-value="dropVal" width="200" :drop-props="{minWidth: 400, class: 'my-dropbox'}">
                <w-option v-for="item in drops" :value="item.id" :text="item.text"></w-option>
              </w-dropbox>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    dropVal: '1',
                    drops: [
                      {id: '1', text: '音乐'},
                      {id: '2', text: '美术'},
                      {id: '3', text: '体育'},
                    ]
                  }
                }
              }
            </${'script'}>
            <style>
              .my-dropbox {
                background: lightpink;
              }
            </style>
          `,
					comp: {
						data() {
						  return {
						    dropVal: '1',
						    drops: [
						      {id: '1', text: '音乐'},
						      {id: '2', text: '美术'},
						      {id: '3', text: '体育'},
						    ]
						  }
						}
					}
        }]
      }
    }
  }
</script>

<style>
	.my-dropbox {
		background: lightpink;
	}
</style>
